<template>
  <el-menu 
      default-active="1-4-1" 
      class="el-menu-vertical-demo" 
      @open="handleOpen" 
      @close="handleClose" 
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      <h3>{{ isCollapse ? '后台': '通用后台管理系统'}}</h3>
      <el-menu-item @click="clickMenu(n)" v-for=" n in noChildren" :Key="n.name" :index="n.name">
      <i :class="`el-icon-${n.icon}`"></i>
       <span  slot="title">{{ n.label }}</span>
      </el-menu-item>
    <el-submenu v-for="h in hasChidren" :key="h.label" :index="h.label">
    <template slot="title">
      <i :class="`el-icon-${h.icon}`"></i>
      <span slot="title">{{ h.label }}</span>
    </template>
    <el-menu-item-group v-for="hc in h.children" :key="hc.path">
      <el-menu-item @click="clickMenu(hc)" :index="hc.name">{{ hc.label }}</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>
</template>

<script>
import Cookie from 'js-cookie'
export default {
 name:'common-aside',
 data(){
      return {     
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickMenu(item){
        console.log(this.$route.path !== item.path )
        if(this.$route.path !== item.path && !(this.$route.path === '/home' && item.path === '/')){
          this.$router.push(item.path)
        }
        this.$store.commit('selectMenu',item)
      }
    },
    computed: {
      noChildren(){ 
        return  (this.menuData||[]).filter(item => !item.children)
        
      },
      hasChidren(){
        return this.menuData.filter(item => item.children)
      },
      isCollapse(){
        return this.$store.state.tab.isCollapse
      },
      menuData(){
         return JSON.parse(Cookie.get('menu')) || this.$store.state.tab.menu
      },
      title(){
         return this.$store.state.tab.title
      }
    },
    

}
</script>

<style lang="less" scoped >
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
   height: 100vh;
    border: none;
    h3{
      color:#fff;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-weight: 400;
    }
  }
  .el-submenu .el-menu-item{
    min-width: 100px;
  }
</style>